<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      row-key="id"
      :data="list"
      element-loading-text="Loading"
      stripe
      fit
      highlight-current-row
      default-expand-all
      :tree-props="{
        children: 'sub_button',
        hasChildren: 'hasChildren'
      }"
    >
      <el-table-column label="菜单名称" width="240">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="菜单链接">
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.settime | moment('YYYY-MM-DD') }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getUserGroupMenu
} from '@/api/userGroup'

export default {
  name: 'UserGroupEdit',
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0
    }
  },
  created() {
    const id = this.$route.params && this.$route.params.id
    this.fetchData(id)
  },
  methods: {
    fetchData(id) {
      this.listLoading = true
      getUserGroupMenu({
        clusterid: id
      }).then(response => {
        // console.log(response)
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
